<template>
  <el-drawer
    :append-to-body="true"
    title="主题配置"
    :size="304"
    custom-class="setting-drawer"
    :visible="settingDrawerVisible"
    @open="handleOpen"
    @close="closeSettings"
  >
    <div class="c-black p-h-s f-14">
      <div class="p-b-m p-t-s">
        <el-divider content-position="left">
          导航布局
        </el-divider>
      </div>
      <el-row :gutter="12">
        <el-col
          :span="8"
          v-for="(item, i) in themeList"
          :key="i"
        >
          <div
            @click="changeTheme(item.value)"
            class="theme-item"
            :class="{active: item.value === currentTheme}"
          >
            <img
              class="item-icon"
              :src="item.icon"
            >
            <div>
              {{ item.label }}
            </div>
            <div class="item-desc">
              {{ item.description }}
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- <div class="p-v-m">
        <el-divider content-position="left">
          导航色系
        </el-divider>
      </div>
      <el-row :gutter="12">
        <el-col
          :span="8"
          v-for="(item, i) in colorList"
          :key="i"
        >
          <div
            @click="changeColor(item.value)"
            class="color-item"
            :class="{active: item.value === currentColor}"
          >
            <img
              class="item-icon"
              :src="item.icon"
            >
            <div>{{ item.label }}</div>
          </div>
        </el-col>
      </el-row> -->
      <el-alert
        title="系统版本号"
        type="info"
        :closable="false"
        description="1.0.0"
        style="margin-top: 18px;"
      />
      <el-alert
        title="技术支持"
        type="info"
        :closable="false"
        :description="unit"
        style="margin-top: 16px;"
      />
      <el-alert
        title="咨询电话"
        type="info"
        :closable="false"
        :description="contact"
      />
    </div>
  </el-drawer>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { dictionarySchema } from '@/configs'
import request from '@/utils/request'

export default {
  name: 'BKSettings',
  data () {
    return {
      themeList: [
        { label: '左侧导航', description: '树形结构', value: 'Common', icon: require('./images/theme-common.png') },
        { label: '顶部导航', description: '二级悬浮式', value: 'Top', icon: require('./images/theme-top.png') },
        { label: '顶部导航', description: '二级平铺式', value: 'Horizontal', icon: require('./images/theme-horizontal.png') }
      ],
      currentTheme: '',
      colorList: [
        { label: '经典蓝', value: 'classic-blue', icon: require('./images/classic-blue.png') },
        { label: '深邃蓝', value: 'dark-blue', icon: require('./images/dark-blue.png') },
        { label: '淡雅蓝白', value: 'light-blue', icon: require('./images/light-blue.png') }
      ],
      currentColor: '',
      unit: '北京金水信息技术发展有限公司',
      contact: '电话:010-63204448'

    }
  },
  computed: {
    ...mapState('settings', ['theme', 'settingDrawerVisible'])
  },
  mounted () {
    const themeConfigStr = window.localStorage.getItem(`${dictionarySchema}_bkThemeConfig`)
    const themeConfig = themeConfigStr ? JSON.parse(themeConfigStr) : {}
    document.body.classList.add(themeConfig.color || this.theme.color)
  },
  methods: {
    ...mapMutations('settings', ['setTheme', 'closeSettings']),
    changeTheme (name) {
      this.currentTheme = name
      const themeConfigStr = window.localStorage.getItem(`${dictionarySchema}_bkThemeConfig`)
      const themeConfig = themeConfigStr ? JSON.parse(themeConfigStr) : {}
      themeConfig.name = name
      window.localStorage.setItem(`${dictionarySchema}_bkThemeConfig`, JSON.stringify(themeConfig))
      this.setTheme({ name })
    },
    changeColor (name) {
      document.body.classList.replace(this.currentColor, name)
      this.currentColor = name
      const themeConfigStr = window.localStorage.getItem(`${dictionarySchema}_bkThemeConfig`)
      const themeConfig = themeConfigStr ? JSON.parse(themeConfigStr) : {}
      themeConfig.color = name
      window.localStorage.setItem(`${dictionarySchema}_bkThemeConfig`, JSON.stringify(themeConfig))
      this.setTheme({ color: name })
    },
    handleOpen () {
      const themeConfigStr = window.localStorage.getItem(`${dictionarySchema}_bkThemeConfig`)
      const themeConfig = themeConfigStr ? JSON.parse(themeConfigStr) : {}
      this.currentTheme = themeConfig.name || this.theme.name
      this.currentColor = themeConfig.color || this.theme.color
    }
  },
  created () {
    request.post('/config/getInfo', { configKey: 'sys.index.support' }).then((data) => {
      if (typeof data === 'string') {
        this.unit = data
      }
    })
    request.post('/config/getInfo', { configKey: 'sys.index.phone' }).then((data) => {
      if (typeof data === 'string') {
        this.contact = data
      }
    })
  }
}
</script>

<style lang="scss">
.setting-drawer {
  .el-drawer__header {
    margin: 0;
    padding: 10px;
  }

  .el-divider--horizontal {
    margin: 0;
  }

  .theme-item,
  .color-item {
    width: 100%;
    height: 100%;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;

    &.active {
      border: 1px solid #210fc5;
      color: #1815dd;
    }

    &:hover {
      border: 1px solid #210fc5;
    }

    .item-icon {
      width: 100%;
      height: 44px;
      padding: 0;
      margin: 4px 0;
      border-radius: 6px;
    }

    .item-desc {
      font-size: 12px;
      margin-top: 4px;
      color: rgb(153, 153, 153);
      line-height: 16px;
    }
  }
}
</style>
